<template>
	<view>
		<!-- 轮播图 -->
		<index-swiper></index-swiper>
		<view class="content">
			
			<index-plant :shop="shopList"></index-plant>
			
		</view>
	</view>
</template>

<script setup>
	import IndexSwiper from "@/components/index/swiper.vue";
	import IndexPlant from "@/components/index/index-plant.vue";
	import ajax from "@/util/request"
	import {onLoad} from "@dcloudio/uni-app";
	
	import {reactive} from "vue"
	let shopList = reactive([]); 
	
	onLoad(()=>{
		ajax("/petsystem/user/shop/shopList", {}).then(({ data }) => {
		      // console.log('data=',data)
			  shopList.length = 0;
			  // 将获取信息放入shopList中
			  shopList.push(...data.data);
			  // shopList.push(...data.data);
			  // shopList.push(...data.data);
		    });
	})
</script>

<style lang="scss">
page{
	background-color:#ffe4f5;
}

.swiper{
	height: 600rpx;
	border: 1px solid blueviolet;
}
.swiper-item{
	border-radius: 30rpx;
	overflow: hidden;
	// 像这种多张轮播图同时出现在一屏的情况下就不要指定width
	// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
	// width: 450rpx;
	height: 85%;
	transform: scale(0.8);
	transition: all 0.5s ease;
	text-align: center;
	transition: all 0.5s ease-in-out;
	&.active{
		transform: scale(1);
	}
}
.swiper-img{
	width: 100%;
	height: 100%;
}
// 轮播图end
	.content {
		margin: 30rpx 0;
	}
	.item-box {
		display: flex;
		align-items: center;
		border: 1px solid black;
		margin: 0 20rpx;
	}
	
	.item-box-img {
		width: 150rpx;
		height: 150rpx;
		margin: 30rpx 50rpx;
		border: 1px solid black;
	}
	
	.item-box-text {
		max-width: 400rpx;
		align-items: center;
		border: 1px solid black;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border: 1px solid black;
	}
</style>
